<template>
  <div class="search-result">

    <van-sticky>
      <van-row class="top">
        <van-col span="5">
          <span class="totalcount">共{{ total }}条</span></van-col>
        <van-col span="9">
          <van-tabbar v-model="active" :fixed='false' @change="onChangetabbar">
            <van-tabbar-item>文献</van-tabbar-item>
            <van-tabbar-item>图片</van-tabbar-item>
            <van-tabbar-item>音视频</van-tabbar-item>

          </van-tabbar>
        </van-col>
        <van-col span="5">
          <van-dropdown-menu>
            <van-dropdown-item @change='pax' v-model="value2" :options="option2"/>
          </van-dropdown-menu>
        </van-col>
        <van-col span="5">

          <van-cell @click="showPopup">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">筛选</span>
              <van-icon name="filter-o"/>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </van-sticky>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div v-if="type==0">
        <van-cell v-for="(item,index) in list"
                  :key="index"
        >
          <div slot="title" v-html="highlight(item.title,searchText)" @click="gotodetail(item)"></div>
          <div slot="label">
            <span>{{ item.publishDate }}</span> <span>{{ item.author }}</span> <span>{{ item.sourceDatabase }}</span>
          </div>
        </van-cell>
      </div>
      <div v-if="type==1">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="item in list" :key="item.id">

            <div slot="icon">
              <van-image @click='bigpic(item)' lazy-load fit="fill" :src="getsrc(item)"/>
            </div>
            <div slot="text" class="van-sku-row__image-item-name"><span
                class="van-multi-ellipsis--l2">{{ item.title }}</span></div>

          </van-grid-item>

        </van-grid>
      </div>

      <div v-if="type==2">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="item in list" :key="item.id">

            <div slot="icon">
              <van-image @click="playvideo(item)" lazy-load fit="contain" :src="getsrc(item)"/>
              <span class="playbtn"><van-icon size="40" color="#fff" name="play-circle"/></span></div>
            <div slot="text" class="van-sku-row__image-item-name"><span
                class="van-multi-ellipsis--l2">{{ item.title }}</span>
            </div>

          </van-grid-item>

        </van-grid>
      </div>
    </van-list>

    <van-popup
        v-model="show" v-if="show" position="right" :style="{ height: '90%',width:'90%' }">

      <emclass @close="show=false" @clssearch="clssearch"/>
    </van-popup>

    <van-popup closeable
               close-icon-position="top-right" v-model="showvvedio" v-if="showvvedio" position="right"
               :style="{ height: '100%',width:'100%' }">

      <div class='demo'>
        <videobox :poster="poster" :title="videotitle" :sources="sources"></videobox>
      </div>
    </van-popup>

  </div>
</template>

<script>

import videobox from '@/components/video.vue'
import {ImagePreview} from 'vant';
import {TotalSearch} from '@/api/search'
import yjglconfig from '@/utils/yjglconfig'
import emclass from "./emclass-item"

export default {
  name: '',
  components: {emclass,videobox},
  props: {
    searchText: {
      type: String,
      require: true
    },
    selecttype: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      showvvedio: false,
      poster: '',//封面
      sources: '',//视频地址
      videotitle: '',//视频标题
      active: 0,
      show: false,//分类弹框
      page: 1,
      type: 0, //文献图片音视频
      pageSize: 20,
      total: 100,
      value2: 'a',
      codeList: [],//分类
      orderBy: '',
      orderByValue: '',
      dataSource:'CNKI协同创新,MYDXQKKST,应急管理文献', 
      getImh: yjglconfig.getImh,
      getVideoPic: yjglconfig.getVideoPic,
      getVideo: yjglconfig.getVideo,
      option2: [
        {text: '默认排序', value: 'a'},
        {text: '发表时间', value: '发表时间'},
        {text: '相关性', value: 'RELEVANT'},
      ],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {

    showPopup() {
      this.show = true;
    },
    async onLoad() {
      // 异步更新数据

      // 1. 请求获取数据
      const { data } = await TotalSearch({
        codeList: this.codeList,
        dataSource: this.dataSource,
        orderBy: this.orderBy,
        orderByValue: this.orderByValue,
        page: this.page,
        pageSize: this.pageSize,
        searchType: this.selecttype,
        searchValue: this.searchText,
      })

      // 2. 将数据添加到列表中
      var results = data.data.list

      this.total = data.data.count
      this.list.push(...results)
      // 3. 设置加载状态结束
      this.loading = false

      // 4. 判断数据是否加载完毕
      if (results.length) {
        this.page++ // 更新获取下一页数据的页码
      } else {
        this.finished = true // 没有数据了，将加载状态设置结束，不再 onLoad
      }
    },

    // 切换文献 图片 音视频
    onChangetabbar(index) {
      this.page = 1
      this.type = index
      if(index == 0){
         this.dataSource="CNKI协同创新,MYDXQKKST,应急管理文献";
      }else if(index == 1){
        this.dataSource="MYDXTP";
      }else{
        this.dataSource="MYDXSP";
      }

      this.list = []
      this.onLoad();
    },
    //选择分类点击
    clssearch(val) {
      this.page = 1
      this.list = []
      this.codeList = val
      this.onLoad();
    },

    //拼接src
    getsrc(item) {
      if (item.fileName) {
        if (this.type == 1) {
          return this.getImh + item.fileName
        } else if (this.type == 2) {
          return this.getVideoPic + item.pictureAddress
        }
      }
    },
    //播放音视频
    playvideo(item) {
      this.poster = this.getVideoPic + item.pictureAddress;
      this.sources = this.getVideo + item.fileName;
      this.showvvedio = true;
      this.videotitle = item.title;
    },

    //文献详情页
    gotodetail(item) {
      //console.log(item)
      this.$router.push({
        path: '/article',
        query: {
          'fileName': item.fileName,
          'tableName': item.tableName,
          'sysId': item.sysId,
        }
      })
    },

    //默认排序
    pax(val) {
      this.page = 1
      this.list = []               
      if (val == 'a') {
        this.orderBy = ''
        this.orderByValue = ''
      } else if(val == 'RELEVANT'){
        this.orderBy = val
        this.orderByValue = ''
      }
      else {
        this.orderBy = val
        this.orderByValue = 'desc'
      }                      
      this.onLoad()
    },

    //展示图片
    bigpic(item) {
      ImagePreview({
        images: [
          this.getImh + item.fileName,
        ],
        closeable: true,
      });
    },

    // 参数 source: 原始字符串
    // 参数 keyword: 需要高亮的关键词
    // 返回值：替换之后的高亮字符串
    highlight(source, keyword) {
      // /searchContent/ 正则表达式中的一切内容都会当做字符串使用
      // 这里可以 new RegExp 方式根据字符串创建一个正则表达式
      // RegExp 是原生 JavaScript 的内置构造函数
      // 参数1：字符串，注意，这里不要加 //
      // 参数2：匹配模式，g 全局，i 忽略大小写
      const reg = new RegExp(keyword, 'gi')
      return source.replace(reg, `<span style="color: #3296fa">${keyword}</span>`)
    },
  }
}
</script>

<style scoped lang="less">

.top {
  font-size: 14px;
  height: 45px;
  line-height: 55px;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #eeeeee;
}

/deep/ .van-dropdown-menu__title {
  font-size: 12px;
}

.totalcount {
  margin-left: 5px;
}

/deep/ .van-col {
  height: 48px;
  overflow: hidden;
  font-size: 14px;

}

/deep/ .van-tabbar-item {
  font-size: 14px;
}

/deep/ .van-dropdown-menu__title {
  margin-top: 4px;
}

/deep/ .van-cell__title {
  margin-top: 4px;
}

.playbtn {
  position: absolute;
  width: 57px;
  height: 57px;
  top: 40px;
  left: 52px;

}

/deep/ .van-sticky--fixed {
  position: fixed;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 99;
}


</style>